/* tslint:disable:variable-name */
import * as React from 'react';
import Palette from './../Palette';

export type IconArguments = {
  [key in string]: any;
};

// Button Icons Wrapper
export const ButtonIconSVG = (props: any) => (
  <svg
    className="btn-icon"
    viewBox="0 0 32 32"
  >
    {props.children}
  </svg>
);

// Button Icons Wrapper
export const MenuIconSVG = ({children, width = 20, height = 20}: IconArguments) => (
  <svg
    width={width}
    height={height}
    viewBox={`0 0 ${width} ${height}`}
  >
    {children}
  </svg>
);

// Library Asset Icons Wrapper
export const LibIconSVG = ({children, viewbox = '0 0 16 14'}: IconArguments) => (
  <svg
    viewBox={viewbox}
    width="16px"
    height="14px"
  >
    {children}
  </svg>
);

// Primitives Icons Wrapper
export const PrimitivesSVG = (props: any) => (
  <svg
    viewBox="0 0 14 14"
    width="14px"
    height="14px"
  >
    {props.children}
  </svg>
);

export const BranchIconSVG = () => (
  <ButtonIconSVG>
    <path d="M11.1140507,17.3881583 C10.6185928,17.1357098 10.0154344,17.3265464 9.76295433,17.8220665 L9.76295433,17.8220665 C9.5122223,18.3141558 9.70987111,18.9173455 10.2060697,19.1701713 L20.8859493,24.6118417 C21.3814072,24.8642902 21.9845656,24.6734536 22.2370457,24.1779335 L22.2370457,24.1779335 C22.4877777,23.6858442 22.2901289,23.0826545 21.7939303,22.8298287 L11.1140507,17.3881583 L11.1140507,17.3881583 Z M11.1140507,14.6118417 C10.6185928,14.8642902 10.0154344,14.6734536 9.76295433,14.1779335 L9.76295433,14.1779335 C9.5122223,13.6858442 9.70987111,13.0826545 10.2060697,12.8298287 L20.8859493,7.38815826 C21.3814072,7.13570985 21.9845656,7.32654643 22.2370457,7.8220665 L22.2370457,7.8220665 C22.4877777,8.31415582 22.2901289,8.91734549 21.7939303,9.17017131 L11.1140507,14.6118417 L11.1140507,14.6118417 Z" id="Rectangle-1286" stroke="none" fill="#4D595C" />
    <path d="M6,22 C9.3137085,22 12,19.3137085 12,16 C12,12.6862915 9.3137085,10 6,10 C2.6862915,10 0,12.6862915 0,16 C0,19.3137085 2.6862915,22 6,22 L6,22 L6,22 Z M26,12 C29.3137085,12 32,9.3137085 32,6 C32,2.6862915 29.3137085,0 26,0 C22.6862915,0 20,2.6862915 20,6 C20,9.3137085 22.6862915,12 26,12 L26,12 L26,12 Z M26,32 C29.3137085,32 32,29.3137085 32,26 C32,22.6862915 29.3137085,20 26,20 C22.6862915,20 20,22.6862915 20,26 C20,29.3137085 22.6862915,32 26,32 L26,32 Z M26,30 C28.209139,30 30,28.209139 30,26 C30,23.790861 28.209139,22 26,22 C23.790861,22 22,23.790861 22,26 C22,28.209139 23.790861,30 26,30 L26,30 Z M26,10 C28.209139,10 30,8.209139 30,6 C30,3.790861 28.209139,2 26,2 C23.790861,2 22,3.790861 22,6 C22,8.209139 23.790861,10 26,10 L26,10 Z M6,20 C8.209139,20 10,18.209139 10,16 C10,13.790861 8.209139,12 6,12 C3.790861,12 2,13.790861 2,16 C2,18.209139 3.790861,20 6,20 L6,20 Z" id="Oval-113" stroke="none" fill="#636E71" />
  </ButtonIconSVG>
);

export const CommentsIconSVG = () => (
  <ButtonIconSVG>
    <path d="M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 L12,13 Z M16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 C15.4477153,11 15,11.4477153 15,12 C15,12.5522847 15.4477153,13 16,13 L16,13 Z M20,13 C20.5522847,13 21,12.5522847 21,12 C21,11.4477153 20.5522847,11 20,11 C19.4477153,11 19,11.4477153 19,12 C19,12.5522847 19.4477153,13 20,13 L20,13 Z" id="Oval-54" stroke="none" fill="#4D595C" />
    <path d="M2.99161703,22 C2.44746737,22 2,21.5535906 2,21.008845 L2,2.991155 C2,2.44277075 2.44314967,2 2.99161703,2 L29.008383,2 C29.5525326,2 30,2.44640935 30,2.991155 L30,21.008845 C30,21.5572293 29.5568503,22 29.008383,22 L25,22 C24.4477153,22 24,22.4477153 24,23 L24,31 L25.7128565,30.2986901 L17.8424369,22.2986901 C17.6544529,22.1076111 17.3976273,22 17.1295804,22 L2.99161703,22 L2.99161703,22 Z M24.2871435,31.7013099 C24.9147085,32.3392073 26,31.8948469 26,31 L26,23 L25,24 L29.008383,24 C30.661037,24 32,22.6621819 32,21.008845 L32,2.991155 C32,1.34077861 30.6560437,0 29.008383,0 L2.99161703,0 C1.33896297,0 0,1.33781808 0,2.991155 L0,21.008845 C0,22.6592214 1.34395633,24 2.99161703,24 L17.1295804,24 L16.4167239,23.7013099 L24.2871435,31.7013099 Z" id="Rectangle-726" stroke="none" fill="#636E71" />
  </ButtonIconSVG>
);

export const TeammatesIconSVG = () => (
  <ButtonIconSVG>
    <path d="M32,26.999991 C32,19.8198095 26.1806743,14 19,14 C11.8245028,14 6,19.825742 6,26.9940469 L6,30.9180624 C6,31.4703472 6.44771525,31.9180624 7,31.9180624 C7.55228475,31.9180624 8,31.4703472 8,30.9180624 L8,26.9940469 C8,20.9302163 12.9291676,16 19,16 C25.0760676,16 30,20.9243418 30,26.999991 L30,30.9121094 C30,31.4643941 30.4477153,31.9121094 31,31.9121094 C31.5522847,31.9121094 32,31.4643941 32,30.9121094 L32,26.999991 L32,26.999991 Z M26,7 C26,3.13400675 22.8659932,0 19,0 C15.1340068,0 12,3.13400675 12,7 C12,10.8659932 15.1340068,14 19,14 C22.8659932,14 26,10.8659932 26,7 L26,7 L26,7 Z M14,7 C14,4.23857625 16.2385763,2 19,2 C21.7614237,2 24,4.23857625 24,7 C24,9.76142375 21.7614237,12 19,12 C16.2385763,12 14,9.76142375 14,7 L14,7 L14,7 Z" id="Rectangle-876" stroke="none" fill="#636E71" />
    <path d="M0,20.7604322 L0,23 C0,23.5522847 0.44771525,24 1,24 C1.55228475,24 2,23.5522847 2,23 L2,20.7604322 C2,18.1435881 4.23227325,16 7,16 C7.55228475,16 8,15.5522847 8,15 C8,14.4477153 7.55228475,14 7,14 C3.1454363,14 0,17.0204724 0,20.7604322 L0,20.7604322 L0,20.7604322 Z M11,10.5 C11,8.56700338 9.43299662,7 7.5,7 C5.56700338,7 4,8.56700338 4,10.5 C4,12.4329966 5.56700338,14 7.5,14 C9.43299662,14 11,12.4329966 11,10.5 L11,10.5 L11,10.5 Z M6,10.5 C6,9.67157288 6.67157288,9 7.5,9 C8.32842712,9 9,9.67157288 9,10.5 C9,11.3284271 8.32842712,12 7.5,12 C6.67157288,12 6,11.3284271 6,10.5 L6,10.5 L6,10.5 Z" id="Path" stroke="none" fill="#4D595C" />
  </ButtonIconSVG>
);

export const EditsIconSVG = ({color = '#636E71'}) => (
  <ButtonIconSVG>
    <path d="M23.9476475,3.80551184 C23.558283,3.41614735 22.9287809,3.41436489 22.5355339,3.80761184 L22.5355339,3.80761184 C22.1450096,4.19813614 22.1487722,4.83506367 22.5334339,5.2197254 L26.7802746,9.4665661 C27.1696391,9.85593059 27.7991412,9.85771305 28.1923882,9.46446609 L28.1923882,9.46446609 C28.5829124,9.0739418 28.5791499,8.43701427 28.1944882,8.05235254 L23.9476475,3.80551184 L23.9476475,3.80551184 Z M21.8263271,5.92683218 C21.4369626,5.53746769 20.8074605,5.53568523 20.4142136,5.92893219 L20.4142136,5.92893219 C20.0236893,6.31945648 20.0274518,6.95638402 20.4121136,7.34104574 L24.6589543,11.5878864 C25.0483187,11.9772509 25.6778209,11.9790334 26.0710678,11.5857864 L26.0710678,11.5857864 C26.4615921,11.1952621 26.4578295,10.5583346 26.0731678,10.1736729 L21.8263271,5.92683218 L21.8263271,5.92683218 Z" id="Rectangle-938" stroke="none" fill={color} />
    <path d="M20.7238578,2.14557897 L3.93393222,18.9355045 C3.23003551,19.6394012 2.54467064,21.4699494 1.63017175,24.5662448 C1.54821951,24.8437174 1.46560436,25.1283732 1.38245602,25.4195145 C1.05544961,26.5645172 0.733663207,27.7612541 0.430590898,28.9391175 C0.324547362,29.3512462 0.228376645,29.7317363 0.143796156,30.0716785 C0.0928693043,30.2763614 0.0569948481,30.4225762 0.0378969667,30.5013934 C-0.192676628,31.4529736 0.66558158,32.3112318 1.6171618,32.0806582 C1.69597901,32.0615604 1.84219383,32.0256859 2.04687676,31.9747591 C2.38681889,31.8901786 2.767309,31.7940079 3.17943772,31.6879643 C4.35730115,31.384892 5.55403804,31.0631056 6.69904073,30.7360992 C6.99018202,30.6529509 7.27483785,30.5703357 7.55231038,30.4883835 C10.6486058,29.5738846 12.479154,28.8885197 13.1830507,28.184623 L29.9729762,11.3946975 C32.5299545,8.83771922 32.5330633,4.68881672 29.9814009,2.13715432 C27.4256271,-0.418619489 23.2848953,-0.41545863 20.7238578,2.14557897 L20.7238578,2.14557897 Z M28.1231525,9.54487376 L11.333227,26.3347993 C11.099269,26.5687573 9.27439145,27.2519991 6.81129916,27.9794798 C6.54154526,28.0591523 6.26440749,28.1395855 5.98063638,28.2206289 C4.85998513,28.5406807 3.68471038,28.8566962 2.5275453,29.1544427 C2.12241404,29.2586858 1.74864278,29.3531583 1.41523975,29.4361118 C1.21591559,29.4857053 1.07487474,29.5203103 1.0011053,29.5381851 L2.58037014,31.1174499 C2.59824491,31.0436805 2.63284991,30.9026396 2.68244346,30.7033155 C2.76539696,30.3699124 2.85986946,29.9961412 2.9641125,29.5910099 C3.26185898,28.4338448 3.5778745,27.2585701 3.89792628,26.1379188 C3.97896974,25.8541477 4.05940294,25.57701 4.13907545,25.3072561 C4.86655615,22.8441638 5.54979792,21.0192862 5.78375592,20.7853282 L22.5736815,3.99540267 C24.1137213,2.45536281 26.5980655,2.45346637 28.1315772,3.98697802 C29.6609891,5.51638991 29.6591214,8.00890488 28.1231525,9.54487376 L28.1231525,9.54487376 Z" id="Rectangle-937" stroke="none" fill={color} />
  </ButtonIconSVG>
);

export const DeleteIconSVG = ({color = '#636E71'}) => (
  <ButtonIconSVG>
    <path d="M12,16 C11.4477153,16 11,16.4509752 11,16.990778 L11,21.009222 C11,21.5564136 11.4438648,22 12,22 L12,22 C12.5522847,22 13,21.5490248 13,21.009222 L13,16.990778 C13,16.4435864 12.5561352,16 12,16 L12,16 L12,16 Z M16,16 C15.4477153,16 15,16.4509752 15,16.990778 L15,21.009222 C15,21.5564136 15.4438648,22 16,22 L16,22 C16.5522847,22 17,21.5490248 17,21.009222 L17,16.990778 C17,16.4435864 16.5561352,16 16,16 L16,16 L16,16 Z M20,16 C19.4477153,16 19,16.4509752 19,16.990778 L19,21.009222 C19,21.5564136 19.4438648,22 20,22 L20,22 C20.5522847,22 21,21.5490248 21,21.009222 L21,16.990778 C21,16.4435864 20.5561352,16 20,16 L20,16 L20,16 Z" id="Rectangle-911" stroke="none" fill={color} />
    <path d="M26,8 L29.0034652,8 C29.5538362,8 30,7.55613518 30,7 C30,6.44771525 29.5601869,6 29.0034652,6 L21,6 L21,6 L21,3.99791312 C21,2.89449617 20.1125667,2 19.000385,2 L12.999615,2 C11.8952581,2 11,2.89826062 11,3.99791312 L11,6 L2.99653482,6 C2.44616384,6 2,6.44386482 2,7 C2,7.55228475 2.43981314,8 2.99653482,8 L6,8 L6,30.0029953 C6,31.1059106 6.89821238,32 7.99079514,32 L24.0092049,32 C25.1086907,32 26,31.1050211 26,30.0029953 L26,8 L26,8 Z M19.0000045,6.00005615 C19.0001622,5.92868697 19.0043878,4 19.000385,4 C19.000385,4 13,4.00132893 13,3.99791312 C13,3.99791312 12.9955367,6 12.999615,6 C12.999615,6 15.5849901,5.99942741 17.3616313,6 L19.0000046,6 L19.0000045,6.00005615 L19.0000045,6.00005615 Z M24.0092049,8 C23.9992789,8 24,30.0029953 24,30.0029953 C24,30.0022879 7.99079514,30 7.99079514,30 C8.00072114,30 8,7.99700466 8,7.99700466 C8,7.99771206 24.0092049,8 24.0092049,8 L24.0092049,8 L24.0092049,8 Z" id="Rectangle-1022" stroke="none" fill={color} />
  </ButtonIconSVG>
);

export const EventIconSVG = ({color = '#636E71'}) => (
  <ButtonIconSVG>
    <g id="295" stroke="#979797" transform="translate(-6.000000, 0.000000)" fill={color}>
      <path d="M6.22260689,16.400742 C5.72904704,17.0600945 6.19954456,18 7.02316284,18 L15.4059448,18 L14.4342858,16.7636131 L11.028341,30.7636131 C10.7689037,31.8300196 12.1680968,32.47522 12.8106792,31.5854906 L25.8106792,13.5854906 C26.2883043,12.9241635 25.8157691,12 25,12 L17,12 L17.9863939,13.164399 L19.9863939,1.16439899 C20.1586472,0.13087947 18.827332,-0.438061033 18.199444,0.400741984 L6.22260689,16.400742 L6.22260689,16.400742 Z M18.0136061,0.835601013 L16.0136061,12.835601 C15.9120175,13.4451327 16.3820606,14 17,14 L25,14 L24.1893208,12.4145094 L11.1893208,30.4145094 L12.971659,31.2363869 L16.3776038,17.2363869 C16.530773,16.6067911 16.0539044,16 15.4059448,16 L7.02316284,16 L7.82371879,17.599258 L19.800556,1.59925802 L18.0136061,0.835601013 L18.0136061,0.835601013 Z" id="Path-318" stroke="none" />
    </g>
  </ButtonIconSVG>
);

export const CheckmarkIconSVG = ({color = '#636E71'}) => (
  <ButtonIconSVG>
    <g id="54" stroke={color} transform="translate(0.000000, -4.000000)" fill={color}>
      <path d="M11.1019845,26.5566052 C11.3520608,26.5567993 11.6020077,26.4594946 11.7924369,26.2647615 L31.1563941,6.46316055 C31.5375821,6.07335729 31.539673,5.44349949 31.1551174,5.05025253 C30.7732242,4.65972824 30.1542952,4.65948071 29.7734367,5.04894699 L11.1022349,24.1421356 L2.11361444,14.9503638 C1.73138841,14.5594991 1.11460993,14.5565005 0.730054292,14.9497475 C0.348161148,15.3402718 0.346028359,15.9712557 0.730657026,16.3645774 L10.4101535,26.2628396 C10.6011554,26.4581584 10.8507274,26.5566233 11.1006241,26.5571888 L11.1019845,26.5566052 Z" id="Rectangle-458" stroke="none" />
    </g>
  </ButtonIconSVG>
);

export const ChevronDownIconSVG = ({color = '#636E71'}) => (
  <ButtonIconSVG>
    <path d="M15.282 19.65c.396.467 1.04.467 1.436 0L31.702 2.038c.397-.466.397-1.222 0-1.688-.396-.467-1.04-.467-1.436 0L15.282 17.962h1.436L1.734.35C1.337-.117.694-.117.298.35-.1.816-.1 1.572.298 2.038L15.282 19.65z" stroke="none" fill={color}/>
  </ButtonIconSVG>
);

export const SketchIconSVG = ({color = '#93999A'}) => (
  <LibIconSVG>
    <path d="M15.915 3.64L13.39.173A.417.417 0 0 0 13.052 0H2.947a.417.417 0 0 0-.337.173L.084 3.64a.444.444 0 0 0 .024.55l7.578 8.666a.415.415 0 0 0 .627 0l7.579-8.667a.442.442 0 0 0 .023-.549zm-5.955.693L8 11.06 6.04 4.333h3.92zm-3.645-.866L8 1.155l1.684 2.312H6.315zm2.527-2.6h3.368l-1.684 2.311L8.842.867zM5.473 3.178L3.79.867h3.369L5.473 3.178zm-.842.289H1.263l1.684-2.312 1.684 2.312zm.53.866l1.896 6.508-5.69-6.508H5.16zm5.678 0h3.794l-5.691 6.508 1.897-6.508zm.53-.866l1.683-2.312 1.684 2.312h-3.368z" fill="#93999A"/>
  </LibIconSVG>
);

export const FigmaIconSVG = ({color = '#93999A'}) => (
  <LibIconSVG viewbox="0 0 38 57">
    <path d="M19 28.5a9.5 9.5 0 0 1 9.5-9.5 9.5 9.5 0 0 1 9.5 9.5 9.5 9.5 0 0 1-9.5 9.5 9.5 9.5 0 0 1-9.5-9.5z" fill={color}/>
    <path d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5A9.5 9.5 0 0 1 9.5 57 9.5 9.5 0 0 1 0 47.5z" fill={color}/>
    <path d="M19 0v19h9.5A9.5 9.5 0 0 0 38 9.5 9.5 9.5 0 0 0 28.5 0H19z" fill={color}/>
    <path d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" fill={color}/>
    <path d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" fill={color}/>
  </LibIconSVG>
);

export const IllustratorIconSVG = ({color = '#93999A'}) => (
  <LibIconSVG viewbox="0 0 485 485">
    <path d="M168.404 305.486h68.192l18.428 61.115h57.887l-73.885-238.312h-70.621l-72.95 238.312h55.875l17.074-61.115zm32.795-136.94h.693c3.505 14.264 26.966 96.545 26.966 96.545h-52.75s21.55-82.281 25.091-96.545zm132.751 25.229h53.824v172.826H333.95zm26.583-21.272c17.769 0 29.012-12.078 29.012-26.86-.415-15.583-11.243-27.244-28.595-27.244-17.352 0-28.735 11.66-28.353 27.244-.382 14.782 11.001 26.86 27.936 26.86z" fill={color}/>
    <path d="M0 0v485h485V0H0zm455 455H30V30h425v425z" fill={color} />
  </LibIconSVG>
);

export const FolderIconSVG = ({color = '#93999A'}) => (
  <LibIconSVG>
    <path d="M14.85 1.534H9.1a.31.31 0 0 1-.211-.132L8.465.555A1.068 1.068 0 0 0 7.567 0H2.2c-.353 0-.74.238-.897.555l-.424.847a2.3 2.3 0 0 0-.212.898v8.05c0 .634.516 1.15 1.15 1.15H14.85c.634 0 1.15-.516 1.15-1.15V2.684c0-.634-.516-1.15-1.15-1.15zm.383 8.816a.383.383 0 0 1-.383.383H1.817a.383.383 0 0 1-.383-.383V2.3c0-.15.063-.42.13-.555L1.99.897A.312.312 0 0 1 2.2.767h5.367a.31.31 0 0 1 .212.13l.423.848c.158.317.545.555.898.555h5.75c.212 0 .383.172.383.384v7.666z" fill="#FFF" opacity=".471"/>
  </LibIconSVG>
);

export const FontIconSVG = ({color = '#93999A'}) => (
  <svg width="16px" height="16px" viewBox="0 0 20 20">
    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g id="FontIcon" transform="translate(1.000000, 1.000000)">
        <path d="M8.39921723,3.65486726 L8.39921723,8.37168142 L10.574364,8.37168142 C11.073388,8.37168142 11.4388442,8.26106307 11.6707436,8.03982302 C11.902643,7.81858296 12.0567511,7.38053427 12.1330724,6.72566373 L12.4589041,6.72566373 L12.4589041,10.7876106 L12.1330724,10.7876106 C12.1272015,10.3215316 12.067026,9.97935213 11.952544,9.76106197 C11.838062,9.54277178 11.6795509,9.37905661 11.4770059,9.26991152 C11.2744608,9.16076642 10.9735832,9.10619471 10.574364,9.10619471 L8.39921723,9.10619471 L8.39921723,12.8761062 C8.39921723,13.4837789 8.43737731,13.8849548 8.51369865,14.079646 C8.57240734,14.2271394 8.69569379,14.3539818 8.88356165,14.460177 C9.14187995,14.6017706 9.41193597,14.6725664 9.69373775,14.6725664 L10.1252446,14.6725664 L10.1252446,15 L5,15 L5,14.6725664 L5.4227006,14.6725664 C5.91585375,14.6725664 6.27397151,14.5280251 6.49706461,14.2389381 C6.6379655,14.0501466 6.70841487,13.5958738 6.70841487,12.8761062 L6.70841487,5.1238938 C6.70841487,4.51622114 6.67025479,4.11504522 6.59393348,3.92035398 C6.53522476,3.77286062 6.41487373,3.64601823 6.23287674,3.53982301 C5.98042927,3.39822938 5.71037328,3.32743363 5.4227006,3.32743363 L5,3.32743363 L5,3 L13.8855186,3 L14,5.63716815 L13.6917808,5.63716815 C13.5391382,5.07669336 13.361547,4.66519305 13.1590019,4.40265485 C12.9564569,4.14011668 12.7069486,3.9498531 12.4104697,3.83185841 C12.1139907,3.71386372 11.6546019,3.65486726 11.0322896,3.65486726 L8.39921723,3.65486726 Z" id="F" fill={color} fillRule="nonzero" transform="translate(9.500000, 9.000000) rotate(-23.000000) translate(-9.500000, -9.000000)"/>
        <rect id="Rectangle" stroke={color} x="0" y="0" width="18" height="18" rx="5"/>
      </g>
    </g>
  </svg>
);

export const EventsBoltIcon = ({color = '#CCCCCC'}) => (
  <svg width="12" height="15" viewBox="0 0 8 11">
    <path d="M1.85 10.6a.235.235 0 0 1-.141-.048.289.289 0 0 1-.087-.337l1.621-3.994H.85a.25.25 0 0 1-.231-.169.293.293 0 0 1 .054-.298l5-5.474a.235.235 0 0 1 .318-.032c.1.074.136.216.087.336L4.457 4.58H6.85a.25.25 0 0 1 .231.169.293.293 0 0 1-.054.298l-5 5.474a.239.239 0 0 1-.177.08z" fill={color} opacity=".602" />
  </svg>
);

export const PrimitiveIconSVG = (props: any) => {
  let svgCode = <g />;
  switch (props.type) {
    case 'Rectangle':
      svgCode = (
        <g fill="none">
          <path d="M12.395 13.5H.605c-.61 0-1.105-.496-1.105-1.105V.605C-.5-.005-.004-.5.605-.5h11.79c.61 0 1.105.496 1.105 1.105v11.79c0 .61-.496 1.105-1.105 1.105zM.605.237a.369.369 0 0 0-.368.368v11.79c0 .203.165.368.368.368h11.79a.369.369 0 0 0 .368-.368V.605a.369.369 0 0 0-.368-.368H.605z" />
          <path d="M11.974 13H1.026C.46 13 0 12.54 0 11.974V1.026C0 .46.46 0 1.026 0h10.948C12.54 0 13 .46 13 1.026v10.948C13 12.54 12.54 13 11.974 13zM1.026.684a.342.342 0 0 0-.342.342v10.948c0 .189.153.342.342.342h10.948a.342.342 0 0 0 .342-.342V1.026a.342.342 0 0 0-.342-.342H1.026z" fill="#93999A" />
        </g>
      );
      break;
    case 'Ellipse':
      svgCode = (
        <g fill="none">
          <path d="M12.895 14.3H1.105C.495 14.3 0 13.804 0 13.195V1.405C0 .795.496.3 1.105.3h11.79C13.505.3 14 .796 14 1.405v11.79c0 .61-.496 1.105-1.105 1.105zM1.105 1.037a.369.369 0 0 0-.368.368v11.79c0 .203.165.368.368.368h11.79a.369.369 0 0 0 .368-.368V1.405a.369.369 0 0 0-.368-.368H1.105z"/>
          <path d="M11.527 2.68A6.458 6.458 0 0 0 6.93.775a6.46 6.46 0 0 0-4.597 1.903A6.455 6.455 0 0 0 .43 7.275a6.46 6.46 0 0 0 1.903 4.597 6.455 6.455 0 0 0 4.597 1.904 6.46 6.46 0 0 0 4.597-1.904 6.455 6.455 0 0 0 1.903-4.597 6.457 6.457 0 0 0-1.903-4.596zM6.93 13.091a5.823 5.823 0 0 1-5.816-5.816A5.823 5.823 0 0 1 6.93 1.46a5.823 5.823 0 0 1 5.816 5.816 5.823 5.823 0 0 1-5.816 5.816z" fill="#93999A"/>
        </g>
      );
      break;
    case 'Polygon':
      svgCode = (
        <g fill="none">
          <path d="M1.623 4.754c-.232.17-.374.602-.284.877l2.017 6.207c.088.274.456.542.745.542h6.527c.287 0 .656-.267.745-.542l2.017-6.207c.09-.274-.05-.707-.285-.877L7.825.918c-.233-.169-.688-.17-.921 0l-5.28 3.836zM6.488.346c.484-.352 1.275-.348 1.753 0l5.28 3.836c.485.352.725 1.105.542 1.667l-2.017 6.208c-.185.569-.827 1.03-1.418 1.03H4.1c-.598 0-1.236-.468-1.418-1.03L.666 5.849c-.185-.569.063-1.32.541-1.667L6.487.346z" fill="#93999A"/>
          <path d="M13.195 13.6H1.405C.795 13.6.3 13.104.3 12.495V.705C.3.095.796-.4 1.405-.4h11.79c.61 0 1.105.496 1.105 1.105v11.79c0 .61-.496 1.105-1.105 1.105zM1.405.337a.369.369 0 0 0-.368.368v11.79c0 .203.165.368.368.368h11.79a.369.369 0 0 0 .368-.368V.705a.369.369 0 0 0-.368-.368H1.405z"/>
        </g>
      );
      break;
    case 'Text':
      svgCode = (
        <g fill="#93999A">
          <path d="M12.502 13.953H2.362a.361.361 0 0 1-.362-.36c0-.199.162-.36.362-.36h10.14c.2 0 .362.161.362.36 0 .199-.163.36-.362.36zM12.11 11.293l-1.86-4.315c-.002-.001-.002-.002-.002-.003L7.765 1.218a.363.363 0 0 0-.666 0L4.616 6.975l-.001.003-1.862 4.315a.36.36 0 0 0 .19.473.363.363 0 0 0 .477-.19l1.768-4.099h4.489l1.769 4.1a.362.362 0 0 0 .666-.284h-.001zM5.499 6.757l1.934-4.484 1.934 4.484H5.497h.001z"/>
        </g>
      );
      break;
  }

  return (
    <PrimitivesSVG>
      {svgCode}
    </PrimitivesSVG>
  );
};

export const CollapseChevronDownSVG = ({color = '#93999A'}) => (
  <svg width="9" height="9">
    <path d="M7.379 2.262c1.66 0 2.061.946.88 2.128L5.59 7.058a.997.997 0 0 1-1.416 0L1.507 4.39C.332 3.215.73 2.262 2.387 2.262h4.992z" fill={color} opacity=".432"/>
  </svg>
);

export const CollapseChevronRightSVG = ({color = '#93999A'}) => (
  <svg width="9" height="9">
    <path d="M3.75 2.697c0-1.661.946-2.062 2.127-.88l2.668 2.667a.997.997 0 0 1 0 1.417L5.877 8.568c-1.175 1.175-2.128.778-2.128-.88V2.697z" fill={color} opacity=".432"/>
  </svg>
);

export const ChevronLeftMenuIconSVG = ({color = Palette.ROCK}) => (
  <svg width="13" height="15" viewBox="0 0 18 18">
    <path d="M10 19a.5.5 0 0 0 .354-.853L1.708 9.501 10.354.855a.5.5 0 0 0-.707-.707l-9 9a.5.5 0 0 0 0 .707l9 9a.498.498 0 0 0 .354.146L10 19z" fill={color}/>
  </svg>
);

export const ChevronLeftIconSVG = ({color = '#636E71'}) => (
  <ButtonIconSVG>
    <path d="M.35 16.718c-.467-.396-.467-1.04 0-1.436L17.962.298c.466-.397 1.222-.397 1.688 0 .467.396.467 1.04 0 1.436L2.038 16.718v-1.436L19.65 30.266c.467.397.467 1.04 0 1.436-.466.397-1.222.397-1.688 0L.35 16.718z" stroke="none" fill={color}/>
  </ButtonIconSVG>
);

export const ChevronRightIconSVG = ({color = '#636E71'}) => (
  <ButtonIconSVG>
    <path d="M23.65 15.282c.467.396.467 1.04 0 1.436L6.038 31.702c-.466.397-1.222.397-1.688 0-.467-.396-.467-1.04 0-1.436l17.612-14.984v1.436L4.35 1.734c-.467-.397-.467-1.04 0-1.436.466-.397 1.222-.397 1.688 0L23.65 15.282z" stroke="none" fill={color}/>
  </ButtonIconSVG>
);

export const PreviewIconSVG = () => (
  <svg viewBox="0 0 70 70">
    <path d="M49.5 20a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zM37.557 50.875l12.73-14.417 14.983 16.71a1 1 0 1 0 1.49-1.335L50.274 33.45 37.664 47.732 21.052 26.114.468 51.304a1 1 0 0 0 1.549 1.265l18.987-23.236 16.553 21.542z" fill="#3E4A4D"/>
    <path d="M2 3.002v60.996C2 64.547 2.449 65 3.002 65h60.996c.549 0 1.002-.449 1.002-1.002V3.002C65 2.453 64.551 2 63.998 2H3.002C2.453 2 2 2.449 2 3.002zm-2 0A3.005 3.005 0 0 1 3.002 0h60.996A3.005 3.005 0 0 1 67 3.002v60.996A3.005 3.005 0 0 1 63.998 67H3.002A3.005 3.005 0 0 1 0 63.998V3.002z" fill="#596264"/>
  </svg>
);

export const WarningIconSVG = ({fill = '#FFFFFF', color = '#D17704'}) => (
  <svg className="toast-icon" viewBox="0 0 14 14">
    <path d="M1.242 12.168c-.994 0-1.385-.693-.877-1.542L6.235.82c.51-.852 1.338-.849 1.846 0l5.87 9.805c.51.852.115 1.542-.878 1.542l-11.83.001z" fill={fill}/>
    <path d="M7.688 5.149H6.512l.147 3.066h.889l.14-3.066zM7.1 8.852a.633.633 0 1 0 0 1.267c.357 0 .63-.287.63-.637a.627.627 0 0 0-.63-.63z" fill={color}/>
  </svg>
);

export const InfoIconSVG = () => (
  <svg className="toast-icon" viewBox="0 0 14 14">
    <circle fill="#FFF" cx="7" cy="7" r="7"/>
    <path d="M7.093 3.837c-.385 0-.658.273-.658.623 0 .357.273.623.658.623s.651-.266.651-.623c0-.35-.266-.623-.651-.623zm.665 1.946H5.637v.756h1.015v2.205h-1.05V9.5H8.71v-.756h-.952V5.783z" fill="#1B7E9D"/>
  </svg>
);

export const DangerIconSVG = ({fill = '#FFFFFF'}) => (
  <svg className="toast-icon" viewBox="0 0 14 14">
    <rect fill={fill} width="14" height="14" rx="2"/>
    <g stroke="#DB1010">
      <path d="M9.5 10l-5-6M4.5 10l5-6"/>
    </g>
  </svg>
);

export const SuccessIconSVG = ({viewBox = '0 0 14 14', fill = '#FFFFFF'}) => (
  <svg className="toast-icon" viewBox={viewBox}>
    <circle fill={fill} cx="7" cy="7" r="7"/>
    <g stroke="#6CBC25">
      <path d="M5.5 9.5l5.266-5.103M5.5 9.5L3.976 7.753"/>
    </g>
  </svg>
);

export const DeployIconSVG = ({color = Palette.ROCK}) => (
  <MenuIconSVG>
    <path d="M15.5 20h-12c-0.827 0-1.5-0.673-1.5-1.5v-10c0-0.827 0.673-1.5 1.5-1.5h4c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-4c-0.276 0-0.5 0.224-0.5 0.5v10c0 0.276 0.224 0.5 0.5 0.5h12c0.276 0 0.5-0.224 0.5-0.5v-10c0-0.276-0.224-0.5-0.5-0.5h-4c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h4c0.827 0 1.5 0.673 1.5 1.5v10c0 0.827-0.673 1.5-1.5 1.5z" fill={color} />
    <path d="M12.853 3.646l-3-3c-0.195-0.195-0.512-0.195-0.707 0l-3 3c-0.195 0.195-0.195 0.512 0 0.707s0.512 0.195 0.707 0l2.147-2.146v11.293c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-11.293l2.147 2.146c0.098 0.098 0.226 0.146 0.353 0.146s0.256-0.049 0.353-0.146c0.195-0.195 0.195-0.512 0-0.707z" fill={color} />
  </MenuIconSVG>
);

export const SaveSnapshotSVG = ({color = Palette.ROCK}) => (
  <MenuIconSVG>
    <path d="M13.5,6h-2a.5.5,0,0,1-.5-.5v-3a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5v3A.5.5,0,0,1,13.5,6ZM12,5h1V3H12Z" fill={color} />
    <path d="M19.85,2.65,17.35.15A.5.5,0,0,0,17,0H.5A.5.5,0,0,0,0,.5v19a.5.5,0,0,0,.5.5h19a.5.5,0,0,0,.5-.5V3A.5.5,0,0,0,19.85,2.65ZM6,1h9V7H6ZM16,19H4V11H16Zm3,0H17V10.5a.5.5,0,0,0-.5-.5H3.5a.5.5,0,0,0-.5.5V19H1V1H5V7.5a.5.5,0,0,0,.5.5h10a.5.5,0,0,0,.5-.5V1h.79L19,3.21Z" fill={color} />
  </MenuIconSVG>
);

export const GearSVG = ({color = Palette.ROCK, width = 20, height = 20}) => (
  <MenuIconSVG width={width} height={height}>
    <path d="M4.05,18,3.94,18a9.94,9.94,0,0,1-2-2,.5.5,0,0,1,.09-.69A2,2,0,0,0,.63,11.75a.5.5,0,0,1-.55-.43,10,10,0,0,1,0-2.77.5.5,0,0,1,.53-.42A2,2,0,0,0,2.11,4.63.5.5,0,0,1,2,4,9.94,9.94,0,0,1,4,2a.5.5,0,0,1,.69.09A2,2,0,0,0,8.25.65.5.5,0,0,1,8.68.1a10,10,0,0,1,2.77,0,.5.5,0,0,1,.42.53,2,2,0,0,0,3.49,1.47A.5.5,0,0,1,16,2.05a9.94,9.94,0,0,1,2,2,.5.5,0,0,1-.09.69,2,2,0,0,0,1.45,3.55.5.5,0,0,1,.55.43,10,10,0,0,1,0,2.77.5.5,0,0,1-.53.42,2,2,0,0,0-1.47,3.49.5.5,0,0,1,.07.68,9.94,9.94,0,0,1-2,2,.5.5,0,0,1-.69-.09,2,2,0,0,0-3.55,1.45.5.5,0,0,1-.43.55,10,10,0,0,1-2.77,0,.5.5,0,0,1-.42-.53,2,2,0,0,0-3.49-1.47.5.5,0,0,1-.57.13Zm3.23-1.57A3,3,0,0,1,9.1,19a9,9,0,0,0,1.63,0,3,3,0,0,1,5-2,8.91,8.91,0,0,0,1.16-1.15,3,3,0,0,1,2.06-4.89,9,9,0,0,0,0-1.63,3,3,0,0,1-2-5,8.91,8.91,0,0,0-1.15-1.16,3,3,0,0,1-4.89-2.06A8.94,8.94,0,0,0,9.26,1,3,3,0,0,1,5.1,3.61a3,3,0,0,1-.84-.53A8.91,8.91,0,0,0,3.1,4.23,3,3,0,0,1,1,9.12a9,9,0,0,0,0,1.63A3,3,0,0,1,3.6,14.9a3,3,0,0,1-.53.84A8.91,8.91,0,0,0,4.22,16.9,3,3,0,0,1,7.28,16.45Z" fill={color} />
    <path d="M8.83,12.77a3,3,0,1,1,3.93-1.6A3,3,0,0,1,8.83,12.77Zm1.94-4.6a2,2,0,1,0,1.07,2.62A2,2,0,0,0,10.77,8.17Z" fill={color} />
  </MenuIconSVG>
);

export const ConnectionIconSVG = ({color = Palette.ROCK}) => (
  <MenuIconSVG>
    <path d="M18.5 18h-11c-0.827 0-1.5-0.673-1.5-1.5 0-0.048 0.011-1.19 0.924-2.315 0.525-0.646 1.241-1.158 2.128-1.522 1.071-0.44 2.4-0.662 3.948-0.662s2.876 0.223 3.948 0.662c0.887 0.364 1.603 0.876 2.128 1.522 0.914 1.125 0.924 2.267 0.924 2.315 0 0.827-0.673 1.5-1.5 1.5zM7 16.503c0.001 0.275 0.225 0.497 0.5 0.497h11c0.275 0 0.499-0.223 0.5-0.497-0.001-0.035-0.032-0.895-0.739-1.734-0.974-1.157-2.793-1.768-5.261-1.768s-4.287 0.612-5.261 1.768c-0.707 0.84-0.738 1.699-0.739 1.734z" fill={color} />
    <path d="M13 11c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4c0 2.206-1.794 4-4 4zM13 4c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z" fill={color} />
    <path d="M4.5 18h-3c-0.827 0-1.5-0.673-1.5-1.5 0-0.037 0.008-0.927 0.663-1.8 0.378-0.505 0.894-0.904 1.533-1.188 0.764-0.34 1.708-0.512 2.805-0.512 0.179 0 0.356 0.005 0.527 0.014 0.276 0.015 0.487 0.25 0.473 0.526s-0.25 0.488-0.526 0.473c-0.153-0.008-0.312-0.012-0.473-0.012-3.894 0-3.997 2.379-4 2.503 0.001 0.274 0.225 0.497 0.5 0.497h3c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z" fill={color} />
    <path d="M5 12c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3zM5 7c-1.103 0-2 0.897-2 2s0.897 2 2 2 2-0.897 2-2c0-1.103-0.897-2-2-2z" fill={color} />
  </MenuIconSVG>
);

export const UndoIconSVG = ({color = Palette.ROCK}) => (
  <MenuIconSVG>
    <path d="M17.51 4.49c-1.605-1.605-3.74-2.49-6.010-2.49s-4.405 0.884-6.010 2.49-2.49 3.74-2.49 6.010v1.293l-2.146-2.146c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l3 3c0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l3-3c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-2.146 2.146v-1.293c0-4.136 3.364-7.5 7.5-7.5s7.5 3.364 7.5 7.5-3.364 7.5-7.5 7.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5c2.27 0 4.405-0.884 6.010-2.49s2.49-3.74 2.49-6.010c0-2.27-0.884-4.405-2.49-6.010z" fill={color} />
  </MenuIconSVG>
);

export const RedoIconSVG = ({color = Palette.ROCK}) => (
  <MenuIconSVG>
    <path d="M2.49 4.49c1.605-1.605 3.74-2.49 6.010-2.49s4.405 0.884 6.010 2.49 2.49 3.74 2.49 6.010v1.293l2.146-2.146c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3 3c-0.098 0.098-0.226 0.146-0.354 0.146s-0.256-0.049-0.354-0.146l-3-3c-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0l2.146 2.146v-1.293c0-4.136-3.364-7.5-7.5-7.5s-7.5 3.364-7.5 7.5c0 4.136 3.364 7.5 7.5 7.5 0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5c-2.27 0-4.405-0.884-6.010-2.49s-2.49-3.74-2.49-6.010c0-2.27 0.884-4.405 2.49-6.010z" fill={color} />
  </MenuIconSVG>
);

export const UserIconSVG = ({color = '#BDCCCD', width = '13px', height = '15px'}) => (
  <svg width={width} height={height} viewBox="678 493 17 19">
    <g fill={color}>
      <path d="M686.5 503.9c-2.714 0-4.921-2.22-4.921-4.95s2.207-4.95 4.921-4.95c2.714 0 4.921 2.22 4.921 4.95s-2.207 4.95-4.921 4.95zm0-9c-2.22 0-4.026 1.817-4.026 4.05 0 2.233 1.806 4.05 4.026 4.05 2.22 0 4.026-1.817 4.026-4.05 0-2.233-1.806-4.05-4.026-4.05zM693.658 512h-14.316c-.74 0-1.342-.606-1.342-1.35 0-.061.013-1.516 1.096-2.97.63-.846 1.494-1.518 2.567-1.997 1.31-.586 2.937-.883 4.837-.883s3.527.297 4.837.883c1.073.48 1.936 1.151 2.567 1.997 1.083 1.453 1.096 2.909 1.096 2.97 0 .744-.602 1.35-1.342 1.35zm-7.158-6.3c-3.12 0-5.422.858-6.658 2.48-.926 1.216-.946 2.46-.947 2.472 0 .246.2.448.447.448h14.316a.449.449 0 0 0 .447-.45c0-.01-.02-1.254-.947-2.47-1.237-1.622-3.539-2.48-6.658-2.48z"/>
    </g>
  </svg>
);

export const PasswordIconSVG = () => (
  <svg width="14px" height="19px" viewBox="680 571 14 19">
    <path d="M692.384615,577.705882 L691.846154,577.705882 L691.846154,576.029412 C691.846154,573.256529 689.671846,571 687,571 C684.328154,571 682.153846,573.256529 682.153846,576.029412 L682.153846,577.705882 L681.615385,577.705882 C680.724769,577.705882 680,578.458059 680,579.382353 L680,588.323529 C680,589.247824 680.724769,590 681.615385,590 L692.384615,590 C693.275231,590 694,589.247824 694,588.323529 L694,579.382353 C694,578.458059 693.275231,577.705882 692.384615,577.705882 Z M683.230769,576.029412 C683.230769,573.872353 684.921538,572.117647 687,572.117647 C689.078462,572.117647 690.769231,573.872353 690.769231,576.029412 L690.769231,577.705882 L683.230769,577.705882 L683.230769,576.029412 Z M692.923077,588.323529 C692.923077,588.632 692.681846,588.882353 692.384615,588.882353 L681.615385,588.882353 C681.318154,588.882353 681.076923,588.632 681.076923,588.323529 L681.076923,579.382353 C681.076923,579.073882 681.318154,578.823529 681.615385,578.823529 L692.384615,578.823529 C692.681846,578.823529 692.923077,579.073882 692.923077,579.382353 L692.923077,588.323529 Z" id="Shape" stroke="none" fill="#343F41" fillRule="evenodd" opacity="0.753283514" />
  </svg>
);

export const DownCarrotSVG = ({color = '#778487'}) => (
  <svg width="9" height="6">
    <path d="M7.392.354c1.77 0 2.197 1.007.934 2.27L5.632 5.317a1.603 1.603 0 0 1-2.264 0L.665 2.615C-.584 1.365-.162.353 1.607.354h5.785z" fill={color} opacity=".432"/>
  </svg>
);

export const TrashIconSVG = ({color = '#93999A'}) => (
  <svg width="12" height="16">
    <g fill={color}>
      <path d="M10.8 1.6H8v-.4C8 .538 7.462 0 6.8 0H5.2C4.538 0 4 .538 4 1.2v.4H1.2C.538 1.6 0 2.138 0 2.8v.8c0 .522.334.966.8 1.131V14.8c0 .662.538 1.2 1.2 1.2h8c.662 0 1.2-.538 1.2-1.2V4.731c.466-.165.8-.61.8-1.131v-.8c0-.662-.538-1.2-1.2-1.2zm-6-.4c0-.22.18-.4.4-.4h1.6c.22 0 .4.18.4.4v.4H4.8v-.4zm5.2 14H2a.4.4 0 0 1-.4-.4v-10h8.8v10a.4.4 0 0 1-.4.4zm1.2-11.6a.4.4 0 0 1-.4.4H1.2a.4.4 0 0 1-.4-.4v-.8c0-.22.18-.4.4-.4h9.6c.22 0 .4.18.4.4v.8z"/>
      <path d="M8.5 6c-.276 0-.5.183-.5.41v8.18c0 .227.224.41.5.41s.5-.183.5-.41V6.41C9 6.182 8.776 6 8.5 6zM6.5 6c-.276 0-.5.183-.5.41v8.18c0 .227.224.41.5.41s.5-.183.5-.41V6.41C7 6.182 6.776 6 6.5 6zM3.5 6c-.276 0-.5.183-.5.41v8.18c0 .227.224.41.5.41s.5-.183.5-.41V6.41C4 6.182 3.776 6 3.5 6z"/>
    </g>
  </svg>
);

export const ShareSVG = ({color = '#BDCCCD', fill = 'black'}) => (
  <svg width="14" height="14" viewBox="0 0 12 12">
    <rect fill={fill} stroke={color} x=".362" y="1.862" width="9.776" height="9.776" rx="2.894"/>
    <path fill={fill} d="M6 0h6v6H6z"/>
    <path d="M4.875 7.875l6-6.75m0 0v2.25m-.75 2.25v.75m-4.5-4.5h.75m4.5-.75h-2.25" stroke={color}/>
  </svg>
);

export const PointerSVG = (props: any) => (
  <svg width="10" height="16">
    <path stroke="#FFF" d="M1 1.438V13.25l2.842-2.188L5.737 15l2.368-.875-1.42-4.375H10L1 1z"/>
  </svg>
);

export const PenSVG = (props: any) => (
  <svg width="14" height="14">
    <g fill="#FFF">
      <path d="M9.93.093L8.153 1.878l3.869 3.887 1.793-1.868zM6.554 3.244L3.307 5.13l-3.11 6.93.203.43 3.478-3.545.264-.957 1.059-.304.915.94v1.063l-1.368.484-3.184 3.276.364.305L9.06 10.74l1.641-3.453v-.508l-3.69-3.694z"/>
    </g>
  </svg>
);

export const DropTriangle = (props: any) => (
  <svg width="25px" height="25px" viewBox="0 0 25 25" style={{position: 'absolute', top: '0', left: 0}}>
    <polygon fill="#FFFFFF" points="23 17 23 23 17 23" />
  </svg>
);

export const LogOutSVG = ({color = '#BDCCCD'}) => (
  <svg width="14" height="10">
    <g fill={color}>
      <path d="M0 9V1c0-.551.471-1 1.05-1h7C8.629 0 9.1.449 9.1 1v2a.342.342 0 0 1-.35.333A.342.342 0 0 1 8.4 3V1a.342.342 0 0 0-.35-.333h-7C.857.667.7.816.7 1v8c0 .184.157.333.35.333h7c.193 0 .35-.149.35-.333V7c0-.184.157-.333.35-.333.193 0 .35.149.35.333v2c0 .551-.471 1-1.05 1h-7C.471 10 0 9.551 0 9z"/>
      <path d="M11.448 7.235l2.1-2a.322.322 0 0 0 0-.471l-2.1-2a.363.363 0 0 0-.495 0 .322.322 0 0 0 0 .471l1.502 1.432H4.55c-.193 0-.35.149-.35.333 0 .184.157.333.35.333h7.905l-1.502 1.432a.324.324 0 0 0 0 .47c.136.13.358.13.495 0z"/>
    </g>
  </svg>
);

export const BrushSVG = (props: any) => (
  <svg width="14" height="14">
  <g fill="#FFF">
    <path d="M13.252.105l-7.008 8.1 1.217 1.47L13.825.842c.058-.416.058-.661 0-.736-.058-.075-.249-.075-.573 0zM5.215 9.492H3.863c-.553.58-.967 1.024-1.241 1.33-.275.307-.696.663-1.262 1.07l-1.332.245c.438.606.809 1.013 1.113 1.22.305.207.799.387 1.48.54h1.91c.664-.374 1.102-.685 1.313-.932.211-.246.464-.781.76-1.605-.17-.463-.322-.787-.458-.97-.135-.182-.446-.482-.93-.898z"/>
    </g>
  </svg>
);

export const CliboardIconSVG = ({color = '#93999A'}) => (
  <svg width="12" height="15" viewBox="0 0 8 10">
    <g fill="#D8D8D8">
      <path d="M7.294 10H.706C.316 10 0 9.664 0 9.25v-7c0-.413.317-.75.706-.75h.47c.13 0 .236.112.236.25S1.306 2 1.176 2h-.47c-.13 0-.235.112-.235.25v7c0 .138.105.25.235.25h6.588c.13 0 .235-.112.235-.25v-7c0-.138-.105-.25-.235-.25h-.47c-.13 0-.236-.112-.236-.25s.106-.25.236-.25h.47c.39 0 .706.337.706.75v7c0 .414-.317.75-.706.75z"/>
      <path d="M5.883 2.5H2.117c-.13 0-.236-.112-.236-.25 0-.502.214-.893.6-1.099a1.32 1.32 0 0 1 .36-.127C2.942.443 3.424 0 4 0s1.056.443 1.157 1.024c.102.021.23.058.36.127.383.204.596.59.6 1.085v.014c0 .138-.105.25-.235.25zM2.38 2H5.62a.599.599 0 0 0-.3-.395.899.899 0 0 0-.38-.105c-.13 0-.233-.112-.233-.25C4.706.837 4.389.5 4 .5c-.39 0-.706.337-.706.75 0 .138-.105.25-.235.25 0 0-.195.004-.378.105a.598.598 0 0 0-.3.395zM6.353 3.99H1.647a.24.24 0 0 1-.235-.245.24.24 0 0 1 .235-.245h4.706c.13 0 .235.11.235.245a.24.24 0 0 1-.235.245zM5.412 5.49H1.647a.24.24 0 0 1-.235-.245A.24.24 0 0 1 1.647 5h3.765c.13 0 .235.11.235.245a.24.24 0 0 1-.235.245zM6.353 6.49H1.647a.24.24 0 0 1-.235-.245A.24.24 0 0 1 1.647 6h4.706c.13 0 .235.11.235.245a.24.24 0 0 1-.235.245zM6.353 7.49H1.647a.24.24 0 0 1-.235-.245A.24.24 0 0 1 1.647 7h4.706c.13 0 .235.11.235.245a.24.24 0 0 1-.235.245zM4 8.49H1.647a.24.24 0 0 1-.235-.245A.24.24 0 0 1 1.647 8H4c.13 0 .235.11.235.245A.24.24 0 0 1 4 8.49z"/>
    </g>
  </svg>
);

export const StateInspectorIconSVG = ({color = '#636E71'}) => (
  <svg width="16" height="14">
    <path d="M14.763 1.25c-.392-.253-.941-.478-1.633-.667C11.755.207 9.933 0 8 0 6.067 0 4.245.208 2.87.583c-.692.19-1.242.414-1.633.668C.747 1.567.5 1.93.5 2.333v9.334c0 .402.248.766.737 1.082.392.254.941.479 1.633.668C4.245 13.793 6.067 14 8 14c1.933 0 3.755-.208 5.13-.584.692-.19 1.242-.414 1.633-.668.49-.315.737-.68.737-1.082V2.332c0-.402-.248-.766-.737-1.082zm-11.681.082C4.39.975 6.137.777 8 .777s3.61.198 4.918.555c1.418.389 1.793.824 1.793 1 0 .177-.375.613-1.793 1.001-1.309.358-3.055.556-4.918.556s-3.61-.198-4.918-.556c-1.418-.388-1.793-.824-1.793-1 0-.177.375-.612 1.793-1zm9.836 11.336c-1.309.357-3.055.555-4.918.555s-3.61-.198-4.918-.555c-1.418-.389-1.793-.824-1.793-1V9.67c.389.24.92.454 1.581.635 1.375.376 3.197.583 5.13.583 1.933 0 3.755-.207 5.13-.584.662-.181 1.193-.394 1.58-.635v1.996c0 .177-.374.613-1.792 1v.002zm0-3.112c-1.309.358-3.055.555-4.918.555s-3.61-.197-4.918-.555c-1.418-.388-1.793-.824-1.793-1V6.56c.389.24.92.453 1.581.634 1.375.377 3.197.584 5.13.584 1.933 0 3.755-.208 5.13-.584.662-.18 1.193-.394 1.58-.634v1.996c0 .176-.374.612-1.792 1zm0-3.111C11.61 6.802 9.863 7 8 7s-3.61-.198-4.918-.555c-1.418-.389-1.793-.824-1.793-1V3.447c.389.24.92.454 1.581.635 1.375.376 3.197.583 5.13.583 1.933 0 3.755-.207 5.13-.583.662-.181 1.193-.394 1.58-.635v1.996c0 .177-.374.612-1.792 1z" fill={color}/>
  </svg>
);

export const LibraryIconSVG = ({color = '#636E71'}) => (
  <svg width="14" height="14">
    <g fill={color}>
      <path d="M7.35 0h-1.4C5.371 0 4.9.471 4.9 1.05v.41c-.11-.039-.228-.06-.35-.06h-3.5C.471 1.4 0 1.871 0 2.45v10.5C0 13.529.471 14 1.05 14h3.5c.269 0 .514-.101.7-.268.186.167.431.268.7.268h1.4c.579 0 1.05-.471 1.05-1.05V1.05C8.4.471 7.929 0 7.35 0zm-2.8 13.3h-3.5a.35.35 0 0 1-.35-.35V2.45a.35.35 0 0 1 .35-.35h3.5a.35.35 0 0 1 .35.35v10.5a.35.35 0 0 1-.35.35zm3.15-.35a.35.35 0 0 1-.35.35h-1.4a.35.35 0 0 1-.35-.35V1.05A.35.35 0 0 1 5.95.7h1.4a.35.35 0 0 1 .35.35v11.9z"/>
      <path d="M3.85 4.2H1.849a.35.35 0 0 1 0-.7H3.85a.35.35 0 0 1 0 .7zM13.027 13.736l-2.085.256c-.574.071-1.1-.34-1.17-.914L8.407 1.961c-.07-.574.34-1.1.914-1.17l2.085-.256c.574-.07 1.1.34 1.17.914l1.365 11.117c.07.574-.34 1.1-.914 1.17zm-3.62-12.25a.35.35 0 0 0-.304.39l1.365 11.117a.35.35 0 0 0 .39.304l2.084-.256a.35.35 0 0 0 .305-.39L11.882 1.534a.35.35 0 0 0-.39-.304l-2.085.256z"/>
      <path d="M11.053 3.4l-.695.085a.35.35 0 1 1-.085-.694l.695-.086a.35.35 0 1 1 .085.695z"/>
    </g>
  </svg>
);

export const StackMenuSVG = ({color = '#FFFFFF', width = '3px', height = '8px'}) => (
  <svg width={width} height={height} viewBox="0 0 3 8">
    <g fill={color}>
      <circle cx="1.5" cy="1" r="1"/>
      <circle cx="1.5" cy="4" r="1"/>
      <circle cx="1.5" cy="7" r="1"/>
    </g>
  </svg>
);

export const PublishSnapshotSVG = ({color = Palette.ROCK}) => (
  <svg width="14" height="14">
    <g fill={color}>
      <path d="M.875 7.146c0-1.477 1.076-2.714 2.489-2.894a.437.437 0 0 0 .382-.434C3.746 2.182 5.018.875 6.59.875c1.568 0 2.844 1.304 2.844 2.917 0 .23.178.421.408.436.092.006.16.006.31.003a5.63 5.63 0 0 1 .13-.002c1.568 0 2.843 1.304 2.843 2.917 0 1.284-.816 2.404-1.99 2.783a.438.438 0 1 0 .27.832C12.938 10.266 14 8.81 14 7.146c0-2.092-1.663-3.792-3.719-3.792a6.3 6.3 0 0 0-.147.002 2.567 2.567 0 0 1-.234 0l-.029.436h.438C10.309 1.7 8.646 0 6.589 0 4.53 0 2.872 1.704 2.872 3.818l.382-.434C1.401 3.62 0 5.23 0 7.146c0 1.696 1.102 3.174 2.679 3.641a.437.437 0 1 0 .248-.839C1.723 9.591.875 8.455.875 7.146z"/>
      <path d="M7.442 13.54a.439.439 0 0 1-.875 0V6.75l-1.71 1.71a.437.437 0 1 1-.618-.619l1.926-1.926.463-.463a.44.44 0 0 1 .376-.214.44.44 0 0 1 .329.128L9.808 7.84a.437.437 0 1 1-.62.619L7.443 6.712v6.828z"/>
    </g>
  </svg>
);

export const EyeIconSVG = ({color = '#93999A'}) => (
  <svg width="17" height="17" viewBox="0 0 20 20">
    <path d="M19.872 10.166c-0.047-0.053-1.182-1.305-2.956-2.572-1.047-0.748-2.1-1.344-3.13-1.773-1.305-0.544-2.579-0.82-3.786-0.82s-2.481 0.276-3.786 0.82c-1.030 0.429-2.083 1.026-3.13 1.773-1.774 1.267-2.909 2.52-2.956 2.572-0.171 0.19-0.171 0.479 0 0.669 0.047 0.053 1.182 1.305 2.956 2.572 1.047 0.748 2.1 1.344 3.13 1.773 1.305 0.544 2.579 0.82 3.786 0.82s2.481-0.276 3.786-0.82c1.030-0.429 2.083-1.026 3.13-1.773 1.774-1.267 2.909-2.52 2.956-2.572 0.171-0.19 0.171-0.479 0-0.669zM12.574 6.438c0.907 0.763 1.426 1.873 1.426 3.062 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-1.188 0.519-2.299 1.426-3.062 0.822-0.268 1.691-0.438 2.574-0.438s1.752 0.17 2.574 0.438zM16.317 12.606c-1.533 1.092-3.873 2.394-6.317 2.394s-4.784-1.302-6.317-2.394c-1.157-0.824-2.042-1.658-2.489-2.106 0.447-0.448 1.332-1.281 2.489-2.106 0.53-0.378 1.156-0.78 1.85-1.145-0.347 0.688-0.533 1.455-0.533 2.251 0 2.757 2.243 5 5 5s5-2.243 5-5c0-0.796-0.186-1.563-0.533-2.251 0.694 0.365 1.32 0.768 1.85 1.145 1.157 0.824 2.042 1.658 2.489 2.106-0.447 0.448-1.332 1.281-2.489 2.106z" fill={color} />
  </svg>
);

export const ComponentIconSVG = ({color = '#94999A'}) => (
  <svg width="14" height="15">
    <g stroke={color} fill="none">
      <path d="M1.23 4.038L7 .577M1.23 4.038v6.231M12.77 4.038v6.231M7 7.5v5.77M12.77 4.038L7 .577M1.23 10.27L7 13.73M12.77 10.27L7 13.73" />
      <g>
        <path d="M1.23 4.038L7 7.5M12.77 4.038L7 7.5" />
      </g>
    </g>
  </svg>
);

export const RepeaterIconSVG = ({color = '#94999A'}) => (
  <svg width="14" height="14">
    <g transform="translate(1)" fill="none" fillRule="evenodd">
      <path d="M9.645.102a.37.37 0 0 0-.511 0 .343.343 0 0 0 0 .495l1.55 1.502h-8.6C1.485 2.1 1 2.57 1 3.15v2.873c0 .018.178-.15.361-.15.178 0 .361.168.361.15V3.15c0-.193.162-.35.361-.35h8.6l-1.55 1.502a.343.343 0 0 0 0 .495.369.369 0 0 0 .511 0l2.168-2.1a.343.343 0 0 0 0-.495L9.645.102zM10.556 8.12v2.73c0 .193-.162.35-.362.35h-8.6l1.55-1.502a.343.343 0 0 0 0-.495.37.37 0 0 0-.51 0l-2.167 2.1a.343.343 0 0 0 0 .495l2.166 2.1a.369.369 0 0 0 .511 0 .343.343 0 0 0 0-.495L1.595 11.9h8.601c.597 0 1.083-.471 1.083-1.05V8.084c0-.084-.722 0-.722.035z" fill="#7DA1A2" fillRule="nonzero"/>
      <circle stroke="#7DA1A2" strokeWidth=".7" cx="1.35" cy="7" r="1.35"/>
      <circle stroke="#7DA1A2" strokeWidth=".7" cx="10.9" cy="7" r="1.35"/>
    </g>
  </svg>
);

export const CloseIconSVG = ({color = '#D8D8D8'}) => (
  <svg width="16px" height="16px" viewBox="0 0 16 16">
    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <path d="M7,7 L2,7 L2,9 L7,9 L7,14 L9,14 L9,9 L14,9 L14,7 L9,7 L9,2 L7,2 L7,7 Z M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z" id="Combined-Shape" fill={color} transform="translate(8.000000, 8.000000) rotate(-45.000000) translate(-8.000000, -8.000000) " />
    </g>
  </svg>
);

export const PresentIconSVG = ({size = 13}) => (
  <svg width={size} height={size} viewBox="0 0 13 13">
    <path d="M12.658 2.737h-2.053A1.713 1.713 0 0 0 9.237 0c-.951 0-1.749.753-2.14 1.203-.236.271-.44.563-.597.845a5.044 5.044 0 0 0-.597-.845C5.512.754 4.714 0 3.763 0a1.713 1.713 0 0 0-1.368 2.737H.342A.342.342 0 0 0 0 3.079v2.053c0 .188.153.342.342.342h.342v6.5c0 .566.46 1.026 1.027 1.026h9.578c.566 0 1.027-.46 1.027-1.026v-6.5h.342A.342.342 0 0 0 13 5.132V3.079a.342.342 0 0 0-.342-.342zM7.613 1.652C8.148 1.037 8.74.684 9.237.684a1.028 1.028 0 0 1 0 2.053H6.926c.118-.303.357-.706.687-1.085zm-.087 10.664H5.474V3.42h2.052v8.895zM2.736 1.71c0-.566.461-1.027 1.027-1.027.497 0 1.089.353 1.624.968.33.379.57.782.687 1.085h-2.31c-.567 0-1.027-.46-1.027-1.026zM.685 3.42H4.79V4.79H.684V3.421zm.684 8.553v-6.5H4.79v6.842H1.711a.342.342 0 0 1-.343-.342zm10.264 0a.342.342 0 0 1-.343.342H8.211V5.474h3.42v6.5zm.684-7.185H8.21V3.421h4.105V4.79z" fill="#BCC0C0" fillRule="nonzero"/>
  </svg>
);

export const SyncIconSVG = ({color = '#93999A', className = ''}) => (
  <svg width="13" height="13" viewBox="0 0 20 20" className={className}>
    <path d="M19.854 8.646a.5.5 0 0 0-.707 0l-1.149 1.149a7.94 7.94 0 0 0-2.341-5.452A7.948 7.948 0 0 0 10 2a7.988 7.988 0 0 0-7.077 4.266.5.5 0 0 0 .884.468A6.99 6.99 0 0 1 10 3c3.789 0 6.885 3.027 6.997 6.789l-1.143-1.143a.5.5 0 0 0-.707.707l2 2a.498.498 0 0 0 .708 0l2-2a.5.5 0 0 0 0-.707zM16.869 13.058a.5.5 0 0 0-.676.208A6.99 6.99 0 0 1 10 17c-3.789 0-6.885-3.027-6.997-6.789l1.143 1.143a.498.498 0 0 0 .708 0 .5.5 0 0 0 0-.707l-2-2a.5.5 0 0 0-.707 0l-2 2a.5.5 0 0 0 .707.707l1.149-1.149a7.94 7.94 0 0 0 2.341 5.452A7.948 7.948 0 0 0 10.001 18a7.988 7.988 0 0 0 7.077-4.266.5.5 0 0 0-.208-.676z" fill={color}/>
  </svg>
);

export const AlignDistributeIcons = {
  AlignVLeft: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1: '4.48', y1:'3.04', x2: '4.48', y2: '28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x: '7.36', y:'5.92', width:'11.52', height: '8.64', style: {fill: color}}),
      React.createElement('rect', {x: '7.36', y:'17.44', width:'20.15', height: '8.64', style: {fill: color}}),
    )
  ),
  AlignVMid: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1: '16', y1:'3.04', x2: '16', y2: '28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x: '10.24', y:'5.92', width:'11.52', height: '8.64', style: {fill: color}}),
      React.createElement('rect', {x: '5.92', y:'17.44', width:'20.15', height: '8.64', style: {fill: color}}),
    )
  ),
  AlignVRight: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1: '27.16', y1:'3.04', x2: '27.16', y2: '28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x: '13.48', y:'5.92', width:'11.52', height: '8.64', style: {fill: color}}),
      React.createElement('rect', {x: '4.84', y:'17.44', width:'20.15', height: '8.64', style: {fill: color}}),
    )
  ),
  AlignHTop: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'3.04', y1:'4.84', x2:'28.96', y2:'4.84', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'4.48', y:'8.44', width:'11.52', height:'8.64', transform:'translate(-2.52 23) rotate(-90)', style: {fill: color}}),
      React.createElement('rect', {x:'11.68', y:'12.76', width:'20.15', height:'8.64', transform:'translate(4.68 38.84) rotate(-90)', style: {fill: color}}),
    )
  ),
  AlignHMid: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'3.04', y1:'16', x2:'28.96', y2:'16', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'4.48', y:'11.68', width:'11.52', height:'8.64', transform:'translate(-5.76 26.24) rotate(-90)', style: {fill: color}}),
      React.createElement('rect', {x:'11.68', y:'11.68', width:'20.15', height:'8.64', transform:'translate(5.76 37.76) rotate(-90)', style: {fill: color}}),
    )
  ),
  AlignHBottom: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'3.04', y1:'27.16', x2:'28.96', y2:'27.16', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'4.48', y:'14.92', width:'11.52', height:'8.64', transform:'translate(-9 29.48) rotate(-90)', style: {fill: color}}),
      React.createElement('rect', {x:'11.68', y:'10.6', width:'20.15', height:'8.64', transform:'translate(6.84 36.68) rotate(-90)', style: {fill: color}}),
    )
  ),
  DistributeHTop: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'28.96', y1:'5.85', x2:'3.04', y2:'5.85', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('line', {x1:'28.96', y1:'17.85', x2:'3.04', y2:'17.85', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'10.24', y:'7.85', width:'11.52', height:'6', style: {fill: color}}),
      React.createElement('rect', {x:'6.85', y:'19.85', width:'17.99', height:'7', transform:'translate(31.69 46.7) rotate(180)', style: {fill: color}}),
    )
  ),
  DistributeHMid: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'28.96', y1:'9.54', x2:'3.04', y2:'9.54', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('line', {x1:'28.96', y1:'21.96', x2:'3.04', y2:'21.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'10.24', y:'6.54', width:'11.52', height:'6', style: {fill: color}}),
      React.createElement('rect', {x:'7', y:'18.46', width:'17.99', height:'7', transform:'translate(32 43.92) rotate(180)', style: {fill: color}}),
    )
  ),
  DistributeHBottom: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'28.96', y1:'13.33', x2:'3.04', y2:'13.33', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('line', {x1:'28.96', y1:'26.31', x2:'3.04', y2:'26.31', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'10.24', y:'5.69', width:'11.52', height:'6', style: {fill: color}}),
      React.createElement('rect', {x:'7', y:'17.78', width:'17.99', height:'7', transform:'translate(32 42.57) rotate(180)', style: {fill: color}}),
    )
  ),
  DistributeVLeft: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'5.5', y1:'3.04', x2:'5.5', y2:'28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('line', {x1:'17.5', y1:'3.04', x2:'17.5', y2:'28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'4.74', y:'13', width:'11.52', height:'6', transform:'translate(-5.5 26.5) rotate(-90)', style: {fill: color}}),
      React.createElement('rect', {x:'14', y:'12.65', width:'17.99', height:'7', transform:'translate(39.15 -6.85) rotate(90)', style: {fill: color}}),
    )
  ),
  DistributeVMid: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'9.62', y1:'3.04', x2:'9.62', y2:'28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('line', {x1:'22.04', y1:'3.04', x2:'22.04', y2:'28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'3.87', y:'13.12', width:'11.52', height:'5.76', transform:'translate(-6.38 25.62) rotate(-90)', style: {fill: color}}),
      React.createElement('rect', {x:'13.04', y:'12.79', width:'17.99', height:'6.43', transform:'translate(38.04 -6.04) rotate(90)', style: {fill: color}}),
    )
  ),
  DistributeVRight: ({color = '#CCCCCC'}) => (
    React.createElement('svg', {xmlns:'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32'},
      React.createElement('line', {x1:'13.27', y1:'3.04', x2:'13.27', y2:'28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('line', {x1:'26.25', y1:'3.04', x2:'26.25', y2:'28.96', style: {fill: 'none', stroke: color, strokeMiterlimit: '10', strokeWidth: '2px'}}),
      React.createElement('rect', {x:'2.87', y:'13.12', width:'11.52', height:'5.76', transform:'translate(-7.37 24.63) rotate(-90)', style: {fill: color}}),
      React.createElement('rect', {x:'12.23', y:'12.79', width:'17.99', height:'6.43', transform:'translate(37.22 -5.22) rotate(90)', style: {fill: color}}),
    )
  ),
};

export const LockIconSVG = ({color = '#93999A'}) => (
  <svg width="13" height="13" viewBox="0 0 20 20">
    <path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z" fill={color} />
  </svg>
);

export const UnlockIconSVG = ({color = '#93999A'}) => (
  <svg width="13" height="13" viewBox="0 0 20 20">
    <path d="M13.5 1c-2.481 0-4.5 2.019-4.5 4.5v2.5h-7.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5h-1.5v-2.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-1c0-2.481-2.019-4.5-4.5-4.5zM11.5 9c0.276 0 0.5 0.224 0.5 0.5v8c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10z" fill={color} />
  </svg>
);
